<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('用户查询页面')"/>
    <style>
        .layui-table-tool-temp {
            padding-right: 0;
        }
        .layui-card-body .layui-form {
            margin: auto;
        }
        .layui-form-item {
            margin-bottom: 0px;
        }
        .dept-tree {
             width: 100%;
             height: -webkit-calc(100vh - 47px);
             height: -moz-calc(100vh - 47px);
             height: calc(100vh - 47px);
        }

    </style>
</head>
<body>
<div class="layuimini-container">
<div class="layui-row layui-col-space10">

    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <form action="" class="layui-form">
                    <div class="main-container" style="min-height: 390px; max-height: 500px; overflow: auto">
                        <ul class="dept-tree" data-id="0" id="deptTree" style="width: 100%;"></ul>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md8">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="userSelect-table" lay-filter="userSelect-table"></table>
                <script type="text/html" id="userSelect-toolbar">
                    <form id="formId" class="layui-form layui-form-pane">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" placeholder="请输入姓名"
                                       class="layui-input" />
                            </div>

                            <label class="layui-form-label">工号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="userSn" placeholder="请输入工号"
                                       class="layui-input" />
                            </div>
                            <button class="layui-btn layui-btn-md" lay-submit lay-filter="userSelect-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="layui-btn layui-btn-md layui-btn-primary">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </form>
                </script>
            </div>
        </div>
    </div>
</div>
</div>

<th:block th:include="include :: footer"/>
<script>
    var userId = '[[${userId}]]';
    var userName = '[[${userName}]]';
    var m = '[[${m}]]';
    let table;
    layui.use(['table', 'form', 'jquery', 'dictionary', 'dtree'], function () {
        let dtree = layui.dtree;
        table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;

        let prefix = pName + "/system/common/";

        let cols = [
            [
                {type: 'checkbox'},
                {
                    field: 'id',
                    title: '主键',
                    hide: true
                },
                {
                    field: 'userSn',
                    title: '职工编号',
                    width: '50%'
                },
                {
                    field: 'username',
                    title: '姓名',
                    width: '50%'
                },
                {title: '操作', toolbar: '#userSelect-bar', align: 'center', width: 130}
            ]
        ]

        table.render({
            elem: '#userSelect-table',
            url: pName + '/system/user/'+ m +'/data',
            page: true,
            escape: true,
            cols: cols,
            skin: 'line',
            toolbar: '#userSelect-toolbar',
            defaultToolbar: []
        });
        table.on('row(userSelect-table)', function (obj) {
            console.log(obj.data)
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

            parent.$("#"+userId).val(obj.data.id);	//修改元素属性
            parent.$("#"+userName).val(obj.data.username);				//表单回填
            parent.layer.close(index);						//关闭弹窗

        })
        form.on('submit(userSelect-query)', function (data) {
            table.reload('userSelect-table', {where: data.field})
            return false;
        });


        deptUtil.initDeptTree("deptTree",
            function (deptId) {
                table.reload('userSelect-table', {where: {deptId: deptId}});
                return;
            }
        );
    })
</script>
</body>
</html>